<template>
  <div class="nav">
    <div
      :class="state.active===key?'item active':'item'"
      :to="item.router"
      v-for="(item,key) in state.menuList"
      :key="key"
      @click="activeMenuItem(key,item)"
    >
      <span class="iconfont" v-html="item.icon"></span>
    </div>
  </div>
</template>
<script>
import { reactive, onMounted } from "vue";
import { router } from "@/router/index.js";
export default {
  name: "TabbarComponent",
  props: ["menuList"],
  setup(props, context) {
    let state = reactive({
      active: 0,
      menuList: props.menuList || [
        {
          path: "/",
          icon: "&#xe61c;",
          text: "首页"
        },
        {
          path: "/data",
          icon: "&#xe61a;",
          text: "数据"
        },
        {
          path: "/user",
          icon: "&#xe607;",
          text: "首页"
        }
      ]
    });

    const activeMenuItem = (key, item) => {
      state.active = key;
      router.push(item.path);
    };

    // 每次加载的时候判断下当前的url，
    onMounted(() => {
      const menuList = state.menuList;
      let hash = window.location.hash; //  '#/librarylist'  '#/'
      hash = hash.replace("#", "");
      var index = menuList.findIndex(item => item.path === hash);
      // console.log("查找 到：", hash, index);
      if (index > -1) {
        state.active = index;
      }
    });

    return {
      state,
      activeMenuItem
    };
  }
};
</script>
<style lang="scss" scoped>
.router-link-exact-active {
  border: none;
}
.nav {
  width: 100%;
  display: flex;
  height: 50px;
  background-color: rgb(253, 159, 196);
  //   border-top: 1px solid rgb(29, 29, 29);
  .item {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .iconfont {
      display: inline-block;
      width: 50px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      font-size: 24px;
      color: white;
      border: none;
    }
  }
  .active {
  }
  .active > .iconfont {
    border: 2px solid rgb(97, 99, 234);
    color: rgb(97, 99, 234);
    border-radius: 50px;
  }
}
</style>